<template>
	<view class="content">
		<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
			:scroll-top="scrollToTop" :scroll-with-animation="true">
		<view class="per-box" style="height: calc(100vh - 34rpx)">
			<view class="line"></view>
			<view class="per-info-box per-info-box1" v-for="(item, index) in perList1" @click="goPayBack(item)">
				<view class="my-icon" v-if="item.checked">
					<u-icon name="checkbox-mark" color="#0DBA5A" size="32"></u-icon>
				</view>
				<view class="names">
					<view class="label">姓名</view><span class="unt">*</span>

					<input v-model="item.name" type="text" class="myinput" placeholder="请输入您的姓名" v-if="item.edit" />
					<view class="text" v-else>{{ item.name || ''}}</view>
				</view>
				<view class="phone">
					<view class="label">手机</view><span class="unt">*</span>
					<!-- -->
					<!-- <view class="phone-btn">获取手机号</view> -->
					<input v-model="item.mobilePhone" type="text" class="myinput" placeholder="请输入您的手机号"
						v-if="item.edit" />
					<view class="text" v-else>{{ item.mobilePhone ||  ''}}</view>

					<view v-if="item.edit">
						<view type="primary" class="phone-btn my-phone-btn" size='medium'
							:data-index="index" :id="'u-btn' + index" v-if="wxPhone"
							@click="getPhone($event, index)">获取手机号
						</view>
						<u-button type="primary" class="phone-btn" size='medium' open-type="getPhoneNumber"
							:data-index="index" :id="'u-btn' + index"
							@getphonenumber="getPhone($event, index)" v-else>获取手机号
						</u-button>
					</view>
					<!-- is_self -->
				</view>
				<view class="phone">
					<view class="label">身份证</view><span class="unt">*</span>

					<input v-model="item.idCardNo" type="text" class="myinput" placeholder="请输入您的身份证" v-if="item.edit" />
					<view class="text" v-else>{{ item.idCardNo || '' }}</view>
				</view>
				<view class="idCardNo">
					<view class="label">是否默认</view><span class="unt"></span>
					<view class="">
						<switch :disabled="!item.edit" checked v-model="item.isSelfs" @change="changeItemSelf(index)" v-if="item.isSelfs" style="transform:scale(0.5);position: relative;margin-left: 20rpx;top: -4rpx;"/>
						<switch  :disabled="!item.edit" v-model="item.isSelfs" @change="changeItemSelf(index)" style="transform:scale(0.5);position: relative;top: -4rpx;margin-left: 20rpx;" v-else/>
					</view>
					<!-- <u-switch v-model="item.isSelf" size="28"></u-switch> -->
				</view>
				
				<view class="add-info  delete-info save-info" @click.stop="editPerInfo(index)" v-if="!item.edit ">
					<image src="../../static/newImgs/save-icon.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
					编辑人员信息
				</view>
				<view class="add-info  delete-info save-info" @click.stop="savePerInfo1(index)" v-if="item.edit">
					<image src="../../static/newImgs/save-icon.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
					<!-- <u-icon name="save" color="#ccc" size="34"></u-icon> -->
					保存人员信息
				</view>
				<view class="add-info delete-info" @click.stop="deletePerInfo1(item.id, index)">
					<image src="../../static/newImgs/delete-icon.png" mode="" style="width: 32rpx;height: 32rpx;">
					</image>
					删除人员信息
				</view>

			</view>
			<view class="per-info-box " v-for="(item, index) in perList" style="position: relative;">
				<view class="names ">
					<view class="label">姓名</view><span class="unt">*</span>
					<input v-model="item.name" type="text" class="myinput" placeholder="请输入您的姓名" />
				</view>
				<view class="phone">
					<view class="label">手机</view><span class="unt">*</span>
					<input v-model="item.mobilePhone" type="text" class="myinput" placeholder="请输入您的手机号" />
					<!-- <view class="phone-btn">获取手机号</view> -->
					<u-button type="primary" class="phone-btn" size='medium' open-type="getPhoneNumber"
						:data-index="index" :id="'u-btn' + index" @getphonenumber="getPhone($event, index)">获取手机号
					</u-button>
				</view>
				<view class="idCardNo">
					<view class="label">身份证</view><span class="unt"></span>
					<input v-model="item.idCardNo" type="text" class="myinput" placeholder="选填" />
				</view>
				<view class="add-info  delete-info save-info" @click="saveInfo(index)">
					<image src="../../static/newImgs/save-icon.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
					<!-- <u-icon name="save" color="#ccc" size="34"></u-icon> -->
					保存人员信息
				</view>
				<view class="add-info delete-info" @click="deletePerInfo(index)">
					<image src="../../static/newImgs/delete-icon.png" mode="" style="width: 32rpx;height: 32rpx;">
					</image>
					删除人员信息
				</view>
			</view>
			<view class="add-info" @click="addPerInfo">
				<image src="../../static/newImgs/add-icon.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
				添加人员信息
			</view>
		</view>

		<u-toast ref="uToast" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				perList1: [],
				perList: [],
				wxPhone: uni.getStorageSync('openId').phonenumber ? true : false,
				changePayBack: false,
				acIndex: -1,
				paramsId: '',
				scrollToTop: '',
				
			}
		},
		onShow() {
			this.getData();
			this.scrollToTop = 0;
		},
		onLoad(params) {
			console.log(params, this.perList1)
			if(params.type) {
				this.changePayBack = true;
				this.paramsId = params.id
			}
		},
		methods: {
			// changeItemSelf
			changeItemSelf(index) {
				this.perList1[index].isSelfs = !this.perList1[index].isSelfs;
			},
			// 回到支付页面
			// changePayBack
			goPayBack(item) {
				// 编辑状态需要返回
				if(item.edit) {
					return;
				}
				if(this.changePayBack) {
					if(!item.id) {
						return;
					}
					// 返回的情况
					
					let pages = getCurrentPages(); // 注意这里不能直接写成getCurrentPage()，因为getCurrentPage只会返回最顶部的page对象
					let currentPage = pages[pages.length - 2];
					// 设置上一页的data值
					
					if(currentPage.$vm.prodMsg.uubuyer_limit_content == 0 || currentPage.$vm.prodMsg.uubuyer_limit_content == -1 || currentPage.$vm.prodMsg.uubuyer_limit_content.buyer_order_total == 0 || currentPage.$vm.prodMsg.uubuyer_limit_content.buyer_order_total == -1) {
						currentPage.$vm.perList = [{
							id: item.id,
							ordername: item.name,
							ordertel: item.mobilePhone,
							personid: item.idCardNo,
						}]
					} else if (currentPage.$vm.prodMsg.uubuyer_limit_content.buyer_order_total == 1) {
						// 选中的要取消选中
						if(item.checked) {
							currentPage.$vm.perList = currentPage.$vm.perList.filter(i => i.id !== item.id)
							
						} else {
							if(currentPage.$vm.perList.length == currentPage.$vm.value) {
								currentPage.$vm.perList.splice(currentPage.$vm.perList.length - 1, 1);
								currentPage.$vm.perList.push({
									id: item.id,
									ordername: item.name,
									ordertel: item.mobilePhone,
									personid: item.idCardNo,
								})
							} else if (currentPage.$vm.perList.length < currentPage.$vm.value) {
								currentPage.$vm.perList.push({
									id: item.id,
									ordername: item.name,
									ordertel: item.mobilePhone,
									personid: item.idCardNo,
								})
							}
						}		
					}
					// 返回上一页
					uni.navigateBack({ delta: 1 });
					// console.log(pages, currentPage)
				}
			},
			// 获取信息管理列表
			getData() {
				let data = {
					customerId: uni.getStorageSync('openId').userId
				}
				this.$http({
					url: this.$myApi.sightList + '?userId=' + data.customerId,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						res.rows.map(j => {
							j.edit = false;
							j.isSelfs = j.isSelf == 1 ? true : false;
						})
						console.log(this.paramsId)
						res.rows.map(j => {
							let list = this.paramsId.split(',')
							if(list.includes(j.id.toString())) {
								j.checked = true;
							} else {
								j.checked = false;
							}
						})
						this.perList1 = res.rows;
						// this.acIndex = this.perList1.findIndex(i =>   i.id == this.paramsId )
						// console.log(this.acIndex, res.rows,this.perList1,this.paramsId , '查询是哪个')
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},
			// 编辑后的保存信息
			savePerInfo1(index) {
				let data = this.perList1[index];
				if (!data.name && !data.mobilePhone && !data.idCardNo) {
					uni.showToast({
						title: '游客信息填写不正确！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				
				if (data.mobilePhone && !this.isPhone(data.mobilePhone)) {
					uni.showToast({
						title: '手机号格式不正确！',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (data.idCardNo && !this.isCardNo(data.idCardNo)) {
					uni.showToast({
						title: '身份证格式不正确！',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				// 如果新增和修改的有默认
				if(data.isSelfs == 1) {
					console.log(1111, '走到了')
					let datas = {
						userId: uni.getStorageSync('openId').userId,
						id: data.id
					}
					this.$http({
						url: this.$myApi.sightseerSelf + '?userId=' + datas.userId + '&id=' + datas.id,
						method: 'POST',
						hideLoading: true,
						// data: data,
						success: res => {
							if (res.code == 200) {
								uni.showToast({
									title: '添加成功！',
									duration: 2000,
									icon: 'none'
								});
								this.getData();
							} else {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						},
						complete: e => {console.log('aaa', 走完了)}
					});
				}
				// 有id走修改
				if (data.id) {
					data.isSelf = data.isSelfs ? 1 : 0;
			
					this.$httpFormData.put(
						this.$myApi.addSightList,
						data, {
							header: {
								"Authorization": uni.getStorageSync('token') || 1,
								Clientid: uni.getStorageSync('clientID') || 1
							}
						}
					).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '修改成功！',
								duration: 2000,
								icon: 'none'
							});
							this.getData();
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							});
						}

					}).catch(err => {
						uni.showToast({
							title: err.msg,
							duration: 2000,
							icon: 'none'
						});
					})
				} else {
					// 无id走添加
					// addCusList
					data.isSelf = data.isSelfs ? 1 : 0;
					data.userId = uni.getStorageSync('openId').userId;
					
					
					this.$http({
						url: this.$myApi.addSightList,
						method: 'POST',
						hideLoading: true,
						data: data,
						success: res => {
							if (res.code == 200) {
								uni.showToast({
									title: '添加成功！',
									duration: 2000,
									icon: 'none'
								});
								this.getData();
							} else {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						},
						complete: e => {}
					});
				}


			},
			// 修改信息
			editPerInfo(index) {
				console.log(index)
				// this.perList1[index].edit = true;
				this.$set(this.perList1[index], 'edit', true);
				console.log(this.perList1)
				// editCusList
			},
			// 获取用户手机号
			// 获取用户手机号
			getPhone(e, index) {
				console.log(e, index)
				if( uni.getStorageSync('openId').phonenumber ) {
					this.perList1[index].mobilePhone = uni.getStorageSync('openId').phonenumber;
					return;
				}
				let data = {
					"code": e.detail.code
				}
				this.$httpFormData.post(
					this.$myApi.getPhone,
					data, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
							"Authorization": uni.getStorageSync('token') || 1,
							Clientid: uni.getStorageSync('clientID') || 1
						}
					}
				).then(res => {
					console.log('获取到的手机号信息', res);
					this.perList1[index].mobilePhone = res.data;
					console.log(this.perList1)
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						duration: 2000,
						icon: 'none'
					});
				})
			},
			// 身份证信息校验
			isCardNo(card) {
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (reg.test(card) === false) {
					// this.$msg("身份证输入不合法");
					return false;
				} else {
					return true;
				}
			},
			isPhone(phone) {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(phone)) {
					return false;
				} else {
					return true;
				}
			},
			addPerInfo() {
				this.perList1.push({
					name: '',
					mobilePhone: '',
					idCardNo: '',
					edit: true,
					isSelf: 0,
					isSelfs: false,
				})
				// 滚动条到最底部
				// 设置成同一值后不改变
				var random_num = Math.random() * 99.9999 + 1.00000
				this.scrollToTop = 999999 + random_num;
				// console.log(this.scrollToTop, 322222222)
			},
			// 保存人员信息
			saveInfo() {
				//   看要保存哪条信息 先检验  姓名  手机 身份证号  校验通过后再保存
				this.$refs.uToast.show({
					title: '保存人员信息成功！',
					type: 'success'
				})
			},
			deletePerInfo(index) {
				
			},
			// 刪除个人信息
			deletePerInfo1(index, acIndex) {	
				if(!index) {
					this.perList1.splice(acIndex, 1)
					return;
				}
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							// console.log('确定');
							// let data = this.perList1[index]
							_this.$http({
								url: _this.$myApi.addSightList + '/' + index,
								method: 'DELETE',
								hideLoading: true,
								success: res => {
									// console.log(res,11111111)
										if (res.code == 200) {
											uni.showToast({
												title: '删除成功！',
												duration: 2000,
												icon: 'none'
											});
											_this.getData();
										} else {
											uni.showToast({
												title: res.msg,
												duration: 2000,
												icon: 'none'
											});
										}
								},
								fail: err => {
									uni.showToast({
										title: err.msg,
										duration: 2000,
										icon: 'none'
									});
								},
								complete: e => {
									
								}
							})
						} else if (res.cancel) {
							// console.log('取消');
						}
					}
				});


			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		width: 690rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		background-color: #fff;
		padding-bottom: 36rpx;
		// padding-left: 26rpx;
		// padding-right: 26rpx;
		height: 100vh;
		overflow: auto;
	}

	.per-box {

		padding-top: 20rpx;
		margin-left:  26rpx;
		margin-right: 26rpx;
		overflow-y: visible;

		.line {
			// border-top: 1rpx solid #C7C7C7;
		}

		.per-info-box {
			width: 100%;
			position: relative;
			padding-bottom: 76rpx;

			margin-top: 20rpx;

			.names {
				border-top: 1rpx solid #C7C7C7;
			}
			.idCardNo {
				border-bottom: 1rpx solid #C7C7C7;
			}
			.names,
			.phone,
			.idCardNo {
				display: flex;
				flex-direction: row;
				// justify-content: space-between;
				// border-bottom: 1rpx solid #C7C7C7;
				height: 81rpx;
				line-height: 81rpx;


				.label {
					width: 114rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #787878;
					text-align-last: justify;
					text-align: justify;

				}

				.unt {
					color: #FF0000;
					position: relative;
					left: 0rpx;
					width: 6rpx;
				}

				.myinput {
					margin-top: 18rpx;
					width: 480rpx;
					margin-left: 56rpx;
				}

				&.phone {
					.myinput {
						width: 280rpx;
					}

					.phone-btn {
						width: 202rpx;
						height: 50rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						opacity: 1;
						// border: 1px solid #0091FF;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #0091FF;
						line-height: 50rpx;
						text-align: center;
						// margin-top: 18rpx;
					}
				}

			}
		}

		.per-info-box1 {
			position: relative;
			.my-icon {
				position: absolute;
				right: 36rpx;
				top: 150rpx;
			}
			// border-bottom: 1rpx solid #C7C7C7;
			.names,
			.phone,
			.idCardNo {

				// border: none;
				.text {
					margin-left: 58rpx;
				}

				position: relative;

				.phone-btn {
					position: absolute;
					right: 0rpx;

				}
			}
		}

		.delete-info {
			position: absolute;
			right: 0rpx;
			background-color: transparent;
		}

		.save-info {
			left: 0rpx;
			right: auto;
		}
	}

	.add-info {
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #4C4C4C;
		margin-top: 20rpx;
		width: 264rpx;
		height: 56rpx;
		background-color: #DFDFDF;
		line-height: 56rpx;
		text-align: center;
		border-radius: 10rpx;

		image {
			margin-right: 24rpx;
			position: relative;
			top: 8rpx;
		}
	}

	.phone-btn {
		&.my-phone-btn {
			width: 202rpx !important;
			height: 50rpx !important;
			background: #FFFFFF;
			border-radius: 24rpx !important;
			opacity: 1;
			border: 1px solid #0091FF !important;
			font-size: 24rpx !important;
			font-family: PingFang SC, PingFang SC !important;
			font-weight: 500;
			color: #0091FF !important;
			line-height: 50rpx !important;
			text-align: center !important;
			margin-top: 18rpx !important;
			background-color: #fff !important;
			
			&:active,
			&:click {
				background-color: #fff !important;
				opacity: 0.7 !important;
			}
		}
		
		::v-deep {
			.u-btn--primary {
				width: 202rpx !important;
				height: 50rpx !important;
				background: #FFFFFF;
				border-radius: 20rpx !important;
				opacity: 1;
				border: 1px solid #0091FF !important;
				font-size: 24rpx !important;
				font-family: PingFang SC, PingFang SC !important;
				font-weight: 500;
				color: #0091FF !important;
				line-height: 50rpx !important;
				text-align: center !important;
				margin-top: 18rpx !important;
				background-color: #fff !important;

				&:active,
				&:click {
					background-color: #fff !important;
					opacity: 0.7 !important;
				}
			}
		}
	}
</style>


<style>
	page {
		background-color: #eee;
	}
</style>